<template>
	<view class="car-count">
		<view class="car-list"  v-for="(item,shopIndex) in cartList" :key="item.id" v-if="cartList.length > 0">
			<view class="shop-mes">
				<!-- <view class="btn centerboth" v-if="item.selected==true">
					<text class="iconfont car-sel"></text>
				</view>
				<view class="btn centerboth" v-else>
					<text class="iconfont car-unsel"></text>
				</view> -->
				<u-avatar class="avatar" :src="item.storeMainImage"></u-avatar>
				<view class="shop-name">{{item.storeName}}</view>
			</view>
			<view class="list">
				<!-- <view class="btn centerboth" v-if="item.selected==true" @click="selThis(shopIndex,gIndex)">
					<text class="iconfont car-sel"></text>
				</view> -->
				<!-- <view class="btn centerboth" v-else @click="selThis(shopIndex,gIndex)">
					<text class="iconfont car-unsel"></text>
				</view> -->
				<image class="car-img" :src="item.prodMainImage" mode="aspectFill"></image>
				<view class="car-mes centerboth">
					<view class="mes-box">
						<view class="g-name line2">{{item.prodName}}</view>
						<view class="gz-box"><text>{{item.prodDesc}}</text></view>
						<view class="price-change-num clearfix">
							<view class="price">￥<text class="yj-price">{{item.price}}</text></view>
							
						</view>
						<uni-number-box :max="item.prodStock" :min="1" :value="item.num"></uni-number-box>
					</view>
				</view>
				<view class="btns">
					<u-button icon="bag-fill" type="primary" size="mini" class="pay" @click="toPay(item)">去支付</u-button>
					<u-button icon="trash-fill" type="warning" size="mini" @click="toDelete(item)">删除</u-button>
				</view>
			</view>
		</view>
		<u-empty v-else mode="cart"></u-empty>
		<u-loadmore v-if="cartList.length > 0" :status = "loadStatus"></u-loadmore>
		<!-- <view class="car-bottom-btn">
			<view class="all-sel-btn centerboth" @click="allSelBtn">
				<text v-if="allSel==true" class="iconfont car-sel"></text>
				<text v-else class="iconfont car-unsel"></text>
				全选
			</view>
			<view class="all-cost centerboth">
				合计:<text class="icon">￥</text><text class="money">{{allAmount}}</text>
			</view>
			<view class="car-btn-box centerboth">
				<view class="del-btn centerboth" @click="delCars">删除</view>
				<view class="js-btn centerboth" @click="jsCars">
					结算({{allNumber}})
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import {apiGetCartList,apiDelCart} from '@/api/cart.js'
	export default {
		data() {
			return {
				cartList:[],
				queryParams:{
					pageNum:1,
					pageSize:10,
				},
				loadStatus:'loadmore'
			};
		},
		mounted() {
			this.doGetList()
		},
		//加载更多 触底触发
		onReachBottom(){
			this.doGetList()
		},
		methods: {
			refresh(){
				this.cartList = []
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.loadStatus = 'loadmore'
			},
			doGetList(){
				if(this.loadStatus !== 'nomore'){
					this.loadStatus = 'loading'
					apiGetCartList(this.queryParams).then(res=>{
						if(this.cartList === []){
							this.cartList = res.rows.map(item=>{
								item.selected = false
								return item
							})
						}else{
							let data = res.rows.map(item=>{
										item.selected = false
										return item
									})
							this.cartList = [...this.cartList, ...data]
						}
						if(res.rows.length < this.queryParams.pageSize){
							this.loadStatus = 'nomore'
						}else{
							this.loadStatus = 'loadmore'
						}
						console.log(res)
						ths.queryParams.pageNum += 1
					})
				}
			},
			toDelete(item){
				this.$modal.confirm("确定删除?")
					.then(()=>{
						return apiDelCart(item.id)
					})
					.then(()=>{
						
					})
			},
			doDelete(id){
				apiDelCart(id).then(res=>{
					this.$modal.msg("删除成功")
				})
			},
			toPay(item){
				console.log(item)
				this.$tab.navigateTo("/pages/order/createOrder?num="+item.num+"&product_id="+item.prodId+"&cartId="+item.id)
			}
		}
	}
</script>

<style scoped>
	@font-face {
	  font-family: 'iconfont';  /* project id 1143282 */
	  src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
	  src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'),
	  url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.car-add:before{
		content: "\e8a6";
	}
	.car-sub:before{
		content: "\e8a7";
	}
	.car-no:before{
		content: "\e64d";
	}
	.car-unsel:before{
		content: "\e63a";
	}
	.car-sel:before{
		content: "\e639";
	}
	.car-del:before{
		content: "\e622";
	}
	.car-count {
		width: 100%;
		padding-bottom: 120rpx;
	}
	.manage-btn {
		width: 100%;
		height: 75rpx;
		background: #FFFFFF;
		text-align: right;
	}
	
	.manage-btn text {
		font-size: 30rpx;
		color: #76a28c;
		line-height: 75rpx;
		padding: 0 24rpx;
	}
	
	

	.all-sel-btn {
		height: 100%;
		float: left;
	}
	.all-sel-btn .iconfont{
		margin-right: 10rpx;
		color: #76a28c;
	}
	
	.car-list {
		width: 100%;
		padding: 24rpx 24rpx 0 24rpx;
		background-color: #FFFFFF;
		margin: 10rpx 10rpx;
		border-radius: 20rpx;
	}
	
	.car-list .list {
		width: 100%;
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		background: #FFFFFF;
		border-radius: 10rpx;
		border-bottom: 1px solid #F5F5F5;
	}
	.car-list .list:nth-child(1){
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.car-list .list:nth-last-child(1){
		margin: 0;
	}
	
	.car-list .list .btn {
		width: 70rpx;
		height: 190rpx;
	}
	.car-list .list .btn .iconfont{
		color: #76a28c;
		font-size: 38rpx;
	}

	.car-list .list .car-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 40rpx;
	}
	
	.car-list .list .car-mes {
		flex: 1;
		margin-left: 20rpx;
	}
	
	.car-list .g-name {
		font-size: 28rpx;
		color: #2a2a2a;
		/* height: 38rpx; */
	}
	
	.car-list .mes-box {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.car-list .gz-box {
		font-size: 26rpx;
		color: #999999;
		margin: 10rpx 0;
	}
	
	.car-list .mes-box .price {
		color: #ff5621;
		font-weight: bold;
		font-size: 24rpx;
	}
	
	.car-list .mes-box .yj-price {
		font-size: 36rpx;
	}
	
	.car-list .price .num {
		color: #2a2a2a;
		font-size: 28rpx;
		font-weight: normal;
		float: right;
	}
	
	.car-list .num-box {
		float: right;
	}
	
	.car-list .num-box .iconfont {
		font-size: 50rpx;
		color: #999999;
	}
	
	.car-list .num-box view {
		width: 60rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #2A2A2A;
		margin: 0 10rpx;
	}
	
	.price-change-num .price {
		float: left;
	}
	
	.car-bottom-btn {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 6;
		box-shadow: 0px -5px 10px -5px #d0d0d0;
		padding: 0 300rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.car-bottom-btn .all-cost{
		margin-right: 10rpx;
	}
	.car-bottom-btn .all-cost .icon{
		font-size: 28rpx;
		margin-top: 5rpx;
	}
	.car-bottom-btn text {
		color: #ff5621;
		font-size: 38rpx;
		line-height: 80rpx;
	}
	.car-btn-box{
		position: absolute;
		right: 0;
		height: 100%;
		z-index: 9;
		top: 0;
	}
	.car-btn-box view{
		width: 150rpx;
		height: 100%;
		cursor: pointer;
	}
	.del-btn{
		background: red;
		color: #FFFFFF;
	}
	.js-btn{
		background: #76a28c;
		color: #FFFFFF;
	}
	.shop-mes{
		height: 40rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #F5F5F5;
		/* border: 1px solid black; */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.shop-mes .avatar{
		display: block;
	}
	.shop-mes .name-mes{
	}
	.car-list .list .btns{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-bottom: 10rpx;
	}
	.car-list .list .btns .pay{
		margin-bottom: 10px;
	}
</style>
